<template>
    <div class="wrap">
        <!--信息头-->
        <span>发布商品</span>
        <el-divider></el-divider>
        <!-- 要带上用户/企业id给 -->
        <div class="banner">
            <el-card class="card_class">
                <el-form :model="ruleForm" :rules="rules" ref="ruleForm" label-width="100px" class="demo-ruleForm" label-position="top">
                    <el-tabs v-model="activeIndex" :tab-position="'left'" :before-leave="beforeLeave">
                        <el-tab-pane label="基本信息" name="0">
                            <el-form-item label="商品名称" prop="name">
                                <el-input v-model="ruleForm.name"></el-input>
                            </el-form-item>
                            <el-form-item label="商品大类" prop="selectedId">
                                <el-select v-model="ruleForm.selectedId" placeholder="商品大类" @change="onChange">
                                    <el-option label="铝土矿" value="1"></el-option>
                                    <el-option label="氧化铝" value="2"></el-option>
                                    <el-option label="电解铝" value="3"></el-option>
                                    <el-option label="成品铝" value="4"></el-option>
                                </el-select>
                            </el-form-item>
                            <!-- <el-form-item>
                                <el-option v-for="(spu,index) in spuList" :key="index" :label="index" :value="spu"></el-option>                        
                            </el-form-item> -->
                            <el-form-item label="spu详情" prop="pdesc">
                                <el-input v-model="ruleForm.desc"></el-input>
                            </el-form-item>
                            <!-- 不允许发布绑定企业之外的其他企业的商品 -->
                            <!-- <el-form-item label="企业名字" prop="fname">
                                <el-input v-model="ruleForm.name"></el-input>
                            </el-form-item> -->
                            <!-- <el-form-item label="预期价格" prop="price">
                                <el-input v-model="ruleForm.price" type="number"></el-input>
                            </el-form-item> -->
                            <el-form-item label="商品图像">
                                <el-upload
                                        class="avatar-uploader"
                                        action="https://jsonplaceholder.typicode.com/posts/"
                                        :show-file-list="false"
                                        :on-success="handleAvatarSuccess"
                                        :before-upload="beforeAvatarUpload">
                                    <img v-if="imageUrl" :src="imageUrl" class="avatar">
                                    <i v-else class="el-icon-plus avatar-uploader-icon"></i>
                                </el-upload>
                            </el-form-item>
                        </el-tab-pane>
                        <el-tab-pane label="参数设定" name="1">
                            <!-- 设定需要的参数(spu-id) -->
                                <!-- <el-form-item v-for="(spec,index) in goods_spec" :key="index" :label="spec">
                                    <el-input v-model="cols[index]"></el-input>
                                </el-form-item> -->
                            <!-- key - 取值范围 - 长度 -->
                            <el-form-item  label="参数名" name="0">
                                <el-input v-model="this.keyName"></el-input>
                            </el-form-item>
                            <el-form-item label="参数长度" name="1">
                                <el-input v-model="this.keyLength" ></el-input>
                            </el-form-item>
                            <el-form-item label="参数取值" name="2">
                                <el-input v-model="this.keyRange"></el-input>
                            </el-form-item>
                            <el-form-item align="right">
                                <el-button type="primary" @click="add">增加参数</el-button>
                            </el-form-item>
                            <el-form-item align="right">
                                <el-button type="primary" @click="onSubmit">发布</el-button>
                                <el-button>取消</el-button>
                            </el-form-item>
                        </el-tab-pane>
                    </el-tabs>
                </el-form>
            </el-card>
        </div>
    </div>
</template>

<script>
export default {
    data() {
        return {
            imageUrl: '',
            activeIndex:'0',
            ruleForm: {
                goods_name: '',
                selectedId: '',
                goods_spu_id:'',
                goods_spu_name:'',
                firm_name:'',
                firm_phone:'',
                firm_mail:'',
                // 后端自动生成日期，这里不用填
                type:"",
                resource: '',
                desc: '',   
                goods_spu_spec:{}
                // {}
            },
            keyName:'',
            keyLength:'',
            keyRange:[],
            selected:false,
            selectedSpu:"",
            goods_spec:["参数1","参数2","参数3"],
            cols:["1","2","3"],
            specCol:"",//"{长:[],宽:[],高:[]}"
            rules: {
                name: [
                    { required: true, message: '请输入商品种类名称', trigger: 'blur' },
                    { max: 10, message: '长度在10个字符以下', trigger: 'blur' }
                ],
                selectedId: [
                    { required: true, message: '请选择商品大类', trigger: 'change' }
                ],
                mail:[
                    {
                        required: false,
                        pattern:/^(([^<>()[\]\\.,;:\s@"]+(\.[^<>()[\]\\.,;:\s@"]+)*)|(".+"))@((\[[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\])|(([a-zA-Z\-0-9]+\.)+[a-zA-Z]{2,}))$/,
                        message: '请输入正确的邮箱',
                        trigger: 'blur'
                    }
                ],
                desc: [
                    { required: true, message: '请填写活动形式', trigger: 'blur' }
                ]
            },
            sampleData:["铝土矿","氧化铝","电解铝","成品铝"],

            testList:{"1":[{"id":1,"name":"古风化壳矿土",},{"id":2,"name":"红土"}],
                      "2":[{"id":4,"name":"AC4D",},{"id":5,"name":"AC5A"},{"id":6,"name":"A308"}],
                      "3":[{"id":7,"name":"α型氧化铝","id":8,"name":"β型氧化铝"}],
                      "4":[{"id":8,"name":"铝条",},{"id":9,"name":"铝板",}]
            },
            postFormUrl:"http://localhost:port/goodsSpu/create",
        };
    },
    methods: {
        onChange()
        {
            this.ruleForm.selected = true
            console.log(this.ruleForm.selected)
            // this.spuList = getSpuList()
            this.spuList = this.testList[this.selectedId] 
        },
        beforeLeave(activeName,oldActiveName)
        {
            if(oldActiveName === "0" && this.ruleForm.selectedId === "")
                return false
            return true
        },
        add()
        {
            // 特征（按照json格式写好的
            this.$refs.ruleForm.validate((valid)=>{
                if(!valid)
                {
                    return this.$message.error("请按要求填写表单!")
                }
            });
            //将填写的表格重写成String->不用，后端接收到了再改
            /*
                {""}
            */
            submitForm("ruleForm")
        },
        submitForm(formName) {
            this.$refs[formName].validate((valid) => {
                if (valid) {
                    alert('submit!')
                    this.$http.post(postFormUrl,cre_para).then(function(res){console.log(res)})

                } else {
                    console.log('error submit!!');
                    return false;
                }
            });
        },
        resetForm(formName) {
            this.$refs[formName].resetFields();
        },
        handleAvatarSuccess(res, file) {
            this.imageUrl = URL.createObjectURL(file.raw);
        },
        beforeAvatarUpload(file) {
            const isJPG = file.type === 'image/jpeg';
            const isLt2M = file.size / 1024 / 1024 < 2;

            if (!isJPG) {
                this.$message.error('上传图片只能是 JPG 格式!');
            }
            if (!isLt2M) {
                this.$message.error('上传图片大小不能超过 2MB!');
            }
            return isJPG && isLt2M;
        }
    }
}
</script>

<style lang="less" scoped>
    .wrap{
        .banner{
            width: 980px;
            height: 100%;
            .card_class{
                width: 800px;
                height: 100%;
                margin: 0 auto;
            }
        }
    }
    // 上传图片样式
    .avatar-uploader{
        width: 178px;
        height: 178px;
        border: 1px dashed #d9d9d9;
        border-radius: 6px;
        cursor: pointer;
        position: relative;
        overflow: hidden;
    }
    .avatar-uploader:hover {
        border-color: #409EFF;
    }
    .avatar-uploader-icon {
        font-size: 28px;
        color: #8c939d;
        width: 178px;
        height: 178px;
        line-height: 178px;
        text-align: center;
    }
    .avatar {
        width: 178px;
        height: 178px;
        display: block;
    }
</style>
